<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>原始内容：{{msg}}</p>
        <p v-text="msg">原始内容</p>
        <p v-html="msg">原始内容</p>

        <a href="http://www.baidu.com">百度</a> <br>

        <a v-bind:href="loc">百度</a> <br>
<!--        ： 千万不要漏掉-->
        <a :href="loc">百度</a> <br>

        <hr>

<!--        传统的v-bind绑定，没有双向能力：模型变化，页面视图变化；但是视图变化，不体现在模型-->
        username: <input type="text" :value="user.username">  -- {{user.username}}<br>
        password: <input type="password" :value="user.password"> -- {{user.password}}<br>

        <br>
<!--        针对表单项标签的v-model绑定，有双向能力：模型变化，页面视图变化；视图变化，体现在模型
            v-model默认就是给表单项标签的value属性绑定值
-->
        username: <input type="text" v-model="user.username">  -- {{user.username}}<br>
        password: <input type="password" v-model="user.password"> -- {{user.password}}<br>

        <hr>
<!--
        vue绑定事件时，事件函数必须在vue对象的methods块中
-->
        <button v-on:click="login">登录</button> <br>
        <button @click="login">登录</button>

        <hr>

<!--
        根据年龄进行布尔判断，判断为true，元素显示，否则不显示
            当元素不显示时，元素根本不会渲染在页面上 （一次性的效果控制选择）
-->
        <p v-if="age>=18">成年</p>
        <p v-else>未成年</p>
        <hr>
<!--
            当元素不显示时，元素会渲染在页面上，展示通过样式控制其为隐藏状态 （频繁切换显示隐藏状态时使用）
-->
        <p v-show="age>=18">成年</p>
        <p v-show="age < 18">未成年</p>

        <hr>
        <table border="1" width="50%">
            <tr>
                <th>id</th>
                <th>name</th>
                <th>age</th>
                <th>gender</th>
            </tr>

            <tr v-for="(stu,idx) in stus">
                <td>{{stu.id}}--{{idx}}</td>
                <td>{{stu.name}}</td>
                <td>{{stu.age}}</td>

                <td v-if="stu.gender==0">男</td>
                <td v-else>女</td>
            </tr>
        </table>

        <hr>

<!--        <select name="pro" @change="proChange" v-model="proIdx">-->
        <select name="pro" v-model="proIdx">
            <option value="-1">--请选择--</option>
            <option value="0">江西省</option>
            <option value="1">浙江省</option>
            <option value="2">江苏省</option>
        </select>

        <select name="city">
            <option value="-1">--请选择--</option>
            <option v-for="cityName in proCities">{{cityName}}</option>
        </select>

        <hr>

        <button @click="inPageTime">进入页面时间</button>
        <button @click="currentTime">当前系统时间</button>
    </div>

</body>
<script>

    let cities = [
        ["南昌市","九江市","赣州市"],  //0
        ["杭州市","宁波市","绍兴市","嘉兴市"],  //1
        ["南京市","苏州市","扬州市"]  //2
    ]

    new Vue({
        el: "#app",
        data:{
            msg:"<b style='color: red;'>helloword vue</b>",
            loc:"http://www.baidu.com",
            user:{
                username:"zhangsan222",
                password:"123456"
            },
            age:15,
            stus:[
                {id:1,name:"zs",age:18,gender:0},
                {id:1,name:"ls",age:28,gender:0},
                {id:1,name:"xh",age:20,gender:1}
            ],
            proCities:["1","2"],
            proIdx: -1
        },
        methods:{
            login(){
                //获取当前用户名和密码，实现登录
                //this表示当前的vue对象，this.user表示获取当前vue对象数据模型中user模型的值
                // let str = JSON.stringify(this.user);
                // let str = "username="+this.user.username + "&password="+this.user.password;
                let str = `username=${this.user.username}&password=${this.user.password}`
                alert(str)
            },
            proChange(){
                //alert(this.proIdx)
                this.proCities = cities[this.proIdx];
            },
            inPageTime(){
                //获取进入页面的时间
                alert(this.inTime)
            },
            currentTime(){
                //获取当前系统时间
                alert(new Date())
            }
        },

        //监听属性（当属性的值发生改变后，能够自动触发该属性对应的回调）
        watch:{
            proIdx:function (newValue,oldValue){
                //alert(newValue + "-" + oldValue)
                this.proCities = cities[newValue];
            }
        },

        //计算属性（进入页面计算一次获取到的数据，记录页面中的属性上，页面不刷新，这个属性的值不变）
        computed:{
            inTime:function (){
                return new Date();
            }
        }
    });
</script>
</html>